<template>
    <div>
        <h2>{{ title.id }} ---- {{ title.centent }}</h2>
        <h3>{{ title1.id }} ---- {{ title1.centent }}</h3>
        <button @click="addShowImage">点击添加显示一张图片</button>
        <ul>
            <li v-for="img in images" :key="img.id">
                <img :src="img.imageUrl" width="200px">
            </li>
        </ul>
    </div>
</template>


<script lang="ts">
//import { ref } from "vue";
export default {
    name: 'Test',

    // setup(){
    //     let name = ref('hello')
    //     return {name}
    // }
}
</script>

<script setup lang="ts">
    import { ref } from 'vue'
    import { reactive } from 'vue'
    import axios from 'axios'

    //let name = ref('hello112')

    let title = reactive({ id: "12312321", centent: "今天下雨了" })


    let title1 = ref({ id: "12312321", centent: "明天也下雨" })


    let images = reactive([{ id: 1, imageUrl: 'https://images.dog.ceo/breeds/shiba/shiba-18.jpg' }])

    // function addShowImage() {
    //     axios.get('https://dog.ceo/api/breeds/image/random').then(response =>{
    //         console.log(response)
    //         images.push({id:images.length+1,imageUrl:response.data.message})
    //         console.log(images)
    //     })
    // }
    async function addShowImage() {
        const response = await axios.get('https://dog.ceo/api/breeds/image/random')
        images.push({ id: images.length + 1, imageUrl: response.data.message })
        console.log(images)

    }



</script>

<style>
li {
    list-style: none;
    /* 移除默认列表符号 */
    padding: 30px;
    /* 为背景图留出空间 */
    display: inline;
    /* display: flex; */
    gap: 20px;
    padding: 10px;
    margin-right: 15px;
}

ul {
    width: 1000px;
    /* 父容器宽度的80% */
    max-width: 600px;
    /* 最大宽度限制 */
}
</style>